import Album from "@/pages/Album";
import Category from "@/pages/Category";
import { NavigationContainer, RouteProp } from "@react-navigation/native";
import { CardStyleInterpolators, createStackNavigator, HeaderStyleInterpolators, StackNavigationProp } from "@react-navigation/stack";
import React from "react";
import { Animated, Platform, StatusBar, StyleSheet } from "react-native";
import BottomTabs from "./BottomTabs";

export type RootStackParamList = {
  BottomTabs: {
    screen?: string;
  };
  Category: undefined;
  Album: {
    item: {
      id: string;
      title: string;
      image: string;
    }
  };


}

export type RootStackNavigation = StackNavigationProp<RootStackParamList>;

let Stack = createStackNavigator<RootStackParamList>();

function getAlbumOptions ({route}: {route: RouteProp<RootStackParamList, 'Album'>}) {
  return {
    headerTitle: route.params.item.title,
    headerTransparent: true,
    headerTitleStyle: {
      opacity: 0,
    },
    headerBackground: () => {
      return (
        <Animated.View style={styles.headerBackground}/>
      );
    }
  }
}

class Navigator extends React.Component {

  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator
          headerMode="float"
          screenOptions={{
            headerTitleAlign: 'center',
            headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            gestureEnabled: true,
            gestureDirection: 'horizontal',
            ...Platform.select({
              android: {
                headerStatusBarHeight: StatusBar.currentHeight,
              }
            }),
            //headerStatusBarHeight: StatusBar.currentHeight,
            headerBackTitleVisible: false,
            headerTintColor: '#333',
            headerStyle: {
              ...Platform.select({
                android: {
                  elevation: 0,
                  borderBottomWidth: StyleSheet.hairlineWidth
                }
              })
            }
          }}
        >
          <Stack.Screen options={{
            headerTitle: "首页",

          }} name="BottomTabs" component={BottomTabs} />
          <Stack.Screen options={{
            headerTitle: "分类",

          }} name="Category" component={Category} />
          <Stack.Screen
            options={getAlbumOptions}
            name="Album"
            component={Album}
          />
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

const styles = StyleSheet.create({
  headerBackground: {
    flex: 1,
    backgroundColor: '#fff',
    opacity: 0,

  }
})

export default Navigator;